<template>
  <div class="flex flex-col">
    <div class="flex items-center justify-between p-x-18px p-y-24px">
      <div class="flex flex-1 items-center gap-16px">
        <el-avatar :size="60">
          <Icon icon="ep:avatar" :size="60" />
        </el-avatar>
        <div class="flex flex-col">
          <span class="text-18px font-bold">用户名</span>
          <span v-if="property.showVip" class="text-12px mt-2 color-#ffb300">会员信息</span>
        </div>
      </div>
      <div class="flex items-center gap-8px">
        <el-image v-if="property.showShare && property.shareIcon" :src="property.shareIcon" class="icon-btn" />
        <Icon v-else-if="property.showShare" icon="ep:share" :size="20" />
        <el-image v-if="property.showTask && property.taskIcon" :src="property.taskIcon" class="icon-btn" />
        <Icon v-else-if="property.showTask" icon="ep:medal" :size="20" />
        <el-image v-if="property.showLogout && property.logoutIcon" :src="property.logoutIcon" class="icon-btn" />
        <Icon v-else-if="property.showLogout" icon="ep:close" :size="20" />
        <el-image v-if="property.showViewDetails && property.viewDetailsIcon" :src="property.viewDetailsIcon" class="icon-btn" />
        <Icon v-else-if="property.showViewDetails" icon="ep:arrow-right" :size="20" />
      </div>
    </div>
    <div
      v-if="property.showBindPhone"
      class="flex items-center justify-between bg-white p-x-20px p-y-8px text-12px"
    >
      <span class="color-#ff690d">点击绑定手机号</span>
      <span class="rounded-26px bg-#ff6100 p-x-8px p-y-5px color-white">去绑定</span>
    </div>
  </div>
</template>
<script setup lang="ts">
import { UserCardProperty } from './config'

/** 用户卡片 */
defineOptions({ name: 'UserCard' })
// 定义属性
defineProps<{ property: UserCardProperty }>()
</script>

<style scoped lang="scss">
.icon-btn {
  width: 20px;
  height: 20px;
}
</style>
